{# TODO 搜索的代码没写 产品搜索#}
{% extends "Sales_base.html" %}

{% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品展示</title>
    <style>
    .search-header {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 1.5rem;
        gap: 1rem;
        padding: 0 2%; /* 添加两侧内边距 */
    }

        #searchInput {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 300px;
            transition: all 0.3s;
        }

          /* 新增右侧内容容器样式 */
    .products-main {
        flex: 1;
        min-width: 0; /* 修复flex布局溢出问题 */
    }

        #searchInput:focus {
            border-color: #2c7a47;
            outline: none;
            box-shadow: 0 0 5px rgba(44,122,71,0.3);
        }

        .search-btn {
            background: #2c7a47;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .search-btn:hover {
            opacity: 0.9;
        }
        /* +++ 新增搜索栏样式结束 +++ */

        /* 产品页面专用样式 */
        .products-container {
            display: flex;
            gap: 2rem;
            padding: 2rem 5%;
            margin-top: 60px;
        }
        /* 产品页面专用样式 */
        .products-container {
            display: flex;
            gap: 2rem;
            padding: 2rem 5%;
            margin-top: 60px;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 250px;
            background: #f5f5f5;
            padding: 1.5rem;
            border-radius: 8px;
            height: fit-content;
        }

        .sidebar-category {
            padding: 0.8rem 1rem;
            margin: 0.5rem 0;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .sidebar-category:hover {
            background: #e0e0e0;
        }

        .sidebar-category.active {
            background: #2c7a47;
            color: white;
        }

        /* 产品网格 */
        .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
        padding: 0 2%; /* 保持两侧间距 */
    }

        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-info {
            padding: 1.2rem;
        }

        .product-price {
            color: #2c7a47;
            font-size: 1.2rem;
            margin: 0.5rem 0;
        }

        .product-stock {
            font-size: 0.9rem;
            color: #666;
        }

        @media (max-width: 768px) {
        .products-container {
            flex-direction: column;
        }

        .sidebar {
            width: 100%;
        }

        .search-header {
            flex-direction: column;
        }

        #searchInput {
            width: 100%;
        }
    }
    </style>
{% endblock %}
{% block main %}
    <!-- 产品展示模块 -->
    <div class="products-container">
        <!-- 左侧分类侧边栏 -->
        <div class="sidebar">
            <h3>产品分类</h3>
            <div class="sidebar-category active" data-category="all">全部商品</div>
            <div class="sidebar-category" data-category="vegetables">新鲜蔬菜</div>
            <div class="sidebar-category" data-category="fruits">时令水果</div>
            <div class="sidebar-category" data-category="grains">优质谷物</div>
            <div class="sidebar-category" data-category="organic">有机产品</div>
        </div>

        <!-- +++ 在右侧内容区域添加搜索栏 +++ -->
        <div class="products-main">
            <!-- 新增搜索栏 -->
            <div class="search-header">
                <input type="text" id="searchInput" placeholder="输入产品名称搜索...">
                <button class="search-btn" onclick="searchProducts()">搜索</button>
            </div>

            <!-- 原有产品网格 -->
            <div class="products-grid" id="products-grid">
                <!-- 产品卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟产品数据
        const products = [
            {
                id: 1,
                name: '有机西红柿',
                category: 'vegetables',
                price: 12.8,
                stock: 50,
                image: 'https://via.placeholder.com/400x300?text=Tomato'
            },
            {
                id: 2,
                name: '红富士苹果',
                category: 'fruits',
                price: 18.5,
                stock: 30,
                image: 'https://via.placeholder.com/400x300?text=Apple'
            },
            {
                id: 3,
                name: '东北大米',
                category: 'grains',
                price: 6.5,
                stock: 100,
                image: 'https://via.placeholder.com/400x300?text=Rice'
            },
            {
                id: 4,
                name: '有机西兰花',
                category: 'organic',
                price: 15.0,
                stock: 20,
                image: 'https://via.placeholder.com/400x300?text=Broccoli'
            },
            {
                id: 5,
                name: '水晶葡萄',
                category: 'fruits',
                price: 22.0,
                stock: 45,
                image: 'https://via.placeholder.com/400x300?text=Grape'
            },
            {
                id: 6,
                name: '黄金玉米',
                category: 'grains',
                price: 3.8,
                stock: 80,
                image: 'https://via.placeholder.com/400x300?text=Corn'
            }
        ];
// +++ 修改渲染函数支持搜索过滤 +++
        function renderProducts(category = 'all', searchTerm = '') {
            const grid = document.getElementById('products-grid');
            grid.innerHTML = '';

            // 组合过滤条件
            let filteredProducts = category === 'all'
                ? products
                : products.filter(p => p.category === category);

            if(searchTerm) {
                const lowerSearch = searchTerm.toLowerCase();
                filteredProducts = filteredProducts.filter(p =>
                    p.name.toLowerCase().includes(lowerSearch)
                );
            }

            filteredProducts.forEach(product => {
                const card = document.createElement('div');
                card.className = 'product-card';
                card.innerHTML = `
                    <img src="${product.image}" class="product-image" alt="${product.name}">
                    <div class="product-info">
                        <h3>${product.name}</h3>
                        <div class="product-price">¥${product.price.toFixed(2)}/kg</div>
                        <div class="product-stock">库存：${product.stock}kg</div>
                    </div>
                `;
                grid.appendChild(card);
            });
        }

        // 侧边栏点击事件
        document.querySelectorAll('.sidebar-category').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.sidebar-category').forEach(c =>
                    c.classList.remove('active'));

                // 添加active类到当前点击项
                item.classList.add('active');

                // 获取分类并渲染产品
                const category = item.dataset.category;
                renderProducts(category);
            });
        });

        function searchProducts() {
            const searchTerm = document.getElementById('searchInput').value;
            const activeCategory = document.querySelector('.sidebar-category.active').dataset.category;
            renderProducts(activeCategory, searchTerm);
        }

        // +++ 添加回车搜索支持 +++
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if(e.key === 'Enter') {
                searchProducts();
            }
        });

        // 侧边栏点击事件修改（支持保持搜索状态）
        document.querySelectorAll('.sidebar-category').forEach(item => {
            item.addEventListener('click', () => {
                // ... 原有点击逻辑不变 ...
                const searchTerm = document.getElementById('searchInput').value;
                renderProducts(category, searchTerm); // 增加搜索参数
            });
        });



        // 初始渲染
        renderProducts();
        document.getElementById('searchInput').addEventListener('input', function(e) {
    searchProducts();
});
    </script>
{% endblock %}